<template>
  <div class="modal-index">
    <je-modal
      v-model:visible="visibleModule"
      title="列表打印预览"
      :resize="false"
      style="background: rgb(240, 242, 245)"
      @close="btnClick"
    >
      <div style="height: 100%; margin-bottom: 20px">
        <div style="width: 1200px; background: #ffffff; margin: 0 auto; padding: 18px">
          <div
            :style="`text-align:${previewData.headerAlign};margin-bottom: 10px`"
            v-html="previewData.header"
          ></div>
          <table border="1" style="margin: auto">
            <tr>
              <th
                v-for="item in previewData.relColumns"
                :key="item.field"
                :width="item.width"
                :style="`height:${previewData.rowHeight}px;text-align: center;`"
              >
                {{ item.title }}
              </th>
            </tr>
            <tr v-for="num in previewData.pageSize" :key="num">
              <td
                v-for="item in previewData.relColumns"
                :key="item.field"
                :width="item.width"
                :style="`height:${previewData.rowHeight}px`"
              ></td>
            </tr>
          </table>
          <div
            :style="`text-align:${previewData.fotterAlign};margin-top: 10px`"
            v-html="previewData.fotter"
          ></div>
        </div>
      </div>
    </je-modal>
  </div>
</template>

<script>
  import { defineComponent, ref, reactive, onMounted, nextTick } from 'vue';
  import { Modal } from '@jecloud/ui';

  export default defineComponent({
    name: 'ModalPreview',
    components: {
      JeModal: Modal,
    },
    props: {
      previewData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['closeModal'],
    setup(props, { emit }) {
      console.log(props.previewData);
      const btnClick = () => {
        emit('closeModal', { type: 'close' });
      };
      return {
        visibleModule: true,
        btnClick,
      };
    },
  });
</script>
<style lang="less" scoped></style>
